<%@ page language="java" pageEncoding="utf-8"%>

<!--/*** CSS样式 **/-->
<style>
    .input_datalist_all{ height: 24px;width: 300px;padding:0;clear: both; }
    .input_datalist_all input{ width: 18px;height: 18px;margin: 0px;margin-left: 6px;margin-right: 6px;float: left; }
    .input_datalist_all p{ font-size: 18px;color: rgb(65, 137, 203);margin:0;float: left; }
    .input_datalist{ width: 300px;height: 130px;padding: 0;border: 1px solid rgb(65, 137, 203);background-color: white; }
    .input_datalist_scroll{ width: 298px;height: 128px;overflow-y: auto;overflow-x: hidden; padding: 0; }
    .input_datalist_cell{  width: 298px;height: 24px;margin: 0;padding: 0;border-bottom: 1px solid rgb(65, 137, 203);clear: both;  }
    .input_datalist_cell input{ width: 18px;height: 18px;margin: 3px 5px 3px 5px;float: left; }
    .input_datalist_cell p{ width: 260px;margin: 0;padding: 0;font-size: 16px;line-height: 24px;text-indent: 7px;color: rgb(65, 137, 203);border-left: 1px solid rgb(65, 137, 203);float: left; }
    .input_datalist_cell_mouseover{  background-color: #AFEEEE;  }
    .input_datalist_cell_selected{  background-color: #AFEEEE;  }
</style>


<!--/*** 控件HTML标签 **/-->
<div class="col-md-12" style="margin-top:15px;padding: 0 0 0 8px;">

    <div class="col-md-3" style="padding: 0;">
        <label style="color: rgb(65, 137, 203);font-size: 13px;padding: 0px;margin: 0px;">Prod-Size1221:</label>
    </div>

    <div class="col-md-9">
        <div class="input_datalist_all">
            <input type="checkbox">
            <p>ALL</p>
        </div>
        <div class="input_datalist">
            <div class="input_datalist_scroll">
                <!--<div class="input_datalist_cell">-->
                    <!--<input type="checkbox"><p>1121212</p>-->
                <!--</div>-->
            </div>
        </div>
    </div>

</div>


<!--数据请求/与后台的交互-->
<script>
//    var map = {};
//    map['shop'] = 'ARRAY';
//    var outTrxObj = ajax('/condition/getPSizeList.do' ,map);
//    for (var i=0; i<outTrxObj.length; i++) {
//        $(".input_datalist_scroll").append("<div class='input_datalist_cell'> <input type='checkbox'><p value='" + outTrxObj[i].value + "'>" + outTrxObj[i].text + "</p> </div>");
//    }
</script>


<!--/*** script事件 **/-->
<script>
    /*** checkbox鼠标进入事件 **/
    $(".input_datalist_cell").mouseover(function () {
        $(this).addClass("input_datalist_cell_mouseover");
    });
    /*** checkbox鼠标移出事件 **/
    $(".input_datalist_cell").mouseout(function () {
        $(this).removeClass("input_datalist_cell_mouseover");
    });
    /*** div点击事件 **/
    $(".input_datalist_cell").click(function () {
        var input_checkbox = $(this).find('input');
        if (input_checkbox.attr('checked')) {
            input_checkbox.attr('checked',false);
            $(this).removeClass("input_datalist_cell_selected");
        }else {
            input_checkbox.attr('checked', true);
            $(this).addClass("input_datalist_cell_selected");
        }
    });
    /*** checkbox点击防止事件冒泡 **/
    $("input[type='checkbox']").click(function(e){
        e.stopPropagation();
    });
    /*** checkbox点击事件 **/
    $(".input_datalist_cell input").click(function () {
        if ($(this).attr('checked')) {
            $(this).parent().addClass("input_datalist_cell_selected");
        }else {
            $(this).parent().removeClass("input_datalist_cell_selected");
        }
    });
    /*** 全选/全不选事件 **/
    $(".input_datalist_all input").click(function () {
        //$(".input_datalist_cell input").prop("checked", $(this).prop("checked"));
        if ($(this).attr('checked')) {
            $(".input_datalist_cell input").attr('checked', true);
            $(".input_datalist_cell").addClass("input_datalist_cell_selected");
        }else {
            $(".input_datalist_cell input").attr('checked', false);
            $(".input_datalist_cell").removeClass("input_datalist_cell_selected");
        }
    });
</script>


